<template>
	<div @click="dropSerch"
		style="border: 1px solid #ccc;height:1.8em;line-height: 1.8em; display: flex;justify-content: space-between;">
		<div>{{ inputTxt }}</div>
		<div style="margin-top: 0.2em;">
			<image src="/static/test1/imgs/daosanjiao.png" style="width: 2.2em;height: 1.5em;"></image>
		</div>
	</div>
	<div v-if="serchShow" style="border: 1px solid #ccc;margin-top: 0.2em;padding: 0.5em;">
		<div style="margin-bottom: 0.2em;">
			<input type="text" style="width: 100%;border: 1px solid #ccc;" @input="handleChange"
				:focus="isInputFocus" />
		</div>
		<div style="max-height: 8em;overflow-y: auto;">
			<template v-for="(item,index) in _objs" :key="index">
				<div @click="rowClick(item)" class="{{index%2==0?'shuang':'dan'}}"
					style="font-size: 0.9em;padding: 0.2em;">{{item.brModel}}
				</div>
			</template>
		</div>
	</div>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref,
		nextTick,
		watch
	} from 'vue';

	const props = defineProps({
		datalist: {
			type: Array,
			default: () => [] // 设置默认值为空数组
		}
	});


	let _objs = reactive([]);

	let serchShow = ref(false);
	let isInputFocus = ref(false);
	let inputTxt = ref(null);

	const dropSerch = () => {
		serchShow.value = serchShow.value ? false : true;
		if (serchShow.value) {
			isInputFocus.value = true;
		}
	}

	const handleChange = (e) => {
		//console.log('props.datalist', props.datalist)
		console.log('e.target.value', e.detail.value);
		var list = props.datalist.filter(x => {
			return x.brModel.includes(e.detail.value);
			//e.target.value
		});
		console.log('list',list)
		_objs.splice(0, _objs.length);
		for (var i = 0; i < list.length; i++) {
			_objs.push(list[i]);
		}

	}

	const setInputTxt = (val) => {
		inputTxt.value = val;
		serchShow.value = false;
	}
	defineExpose({
		setInputTxt
	});

	const emits = defineEmits(['returnMethods']);
	const rowClick = (obj) => {
		emits('returnMethods', obj);
	}


	onMounted(() => {
	
		setTimeout(() => {
			//console.log('json1', JSON.stringify(props.datalist));
			_objs.push(...props.datalist)
		}, 2000)

	})
</script>

<style scoped>
	.dan {
		background-color: #F3F3F3;
	}

	.shuang {
		background-color: #C1C1C1;
	}
</style>